<template>
  <div class="imageupload-container">
    <!-- el-upload 必须配置action属性,值就是服务器地址 默认是post提交数据, 默认直接上传
      后期自己手动配置上传规则 请求方式/地址
      action 上传的地址 覆盖掉
      list-type - 文件列表的类型 - 展示样式效果
      :file-list="数组"  图片列表 用于图片展示的
      preview = fn 点击文件列表中已上传的文件时的钩子
      remove = fn 文件列表移除文件时的钩子
      http-requuest 覆盖默认的上传行为，可以自定义上传的实现
      change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      :before-upload="fn" 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :limit="limit"
      :class="{disabled: isDisabled}"
      :http-request="handleUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog title="预览" top="8vh" width="600px" :visible="isShow" @close="isShow = false">
      <img width="100%" :src="imgUrl">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKID5uXtziSLGAnAG5jQgphma7RcW8TX9A3f', // 身份识别 ID
  SecretKey: 'XooWlUgbEfX8Twve7qJWTBL8fwxhNmul' // 身份密钥
})
export default {
  name: 'Imageupload',
  props: {
    limit: {
      // 使用组件自定义limit
      type: Number,
      default: 1

    }
  },
  data() {
    return {
      //  文件列表
      fileList: [
        // { url: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1573376102,3119725239&fm=11&gp=0.jpg' }
        // { url: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1043970145,1138203863&fm=26&gp=0.jpg' }
      ],
      isShow: false, // 控制头像预览的对话框布尔值
      imgUrl: '' // 预览头像对话框中的图片src地址

    }
  },
  computed: {
    isDisabled() {
      return this.fileList.length >= this.limit
    },
    isAllSuccess() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    handlePreview(file) {
      console.log(file)
      // file 就指当前点击的图像完整信息对象
      this.isShow = true
      this.imgUrl = file.url
    },
    handleRemove(file, fileList) {
      // console.log(file)
      // console.log(fileList)
      // console.log(this.fileList)
      // 将this.fileList更新
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    // 覆盖默认的上传行为
    // 这个函数有一个参数是一个对象，对象中的file参数就是上传的文件信息
    handleUpload({ file }) {
      console.log(file)
      // 腾讯云上传操作
      if (file) {
        const res = this.fileList.find(item => item.uid === file.uid)
        res.status = 'uploading'
        cos.putObject({
          Bucket: 'hrsaas79-1305587025', /* 必须 */
          Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
          Key: Date.now() + file.name, /* 必须 */
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: (progressData) => {
            // console.log(JSON.stringify(progressData))
            res.percentage = parseInt(progressData.percent * 100)
          }
        }, (err, data) => {
          if (err) {
            return this.$message.success('上传失败')
          }
          console.log(data)
          if (data.statusCode === 200) {
            // 在fileList中找到
            const obj = this.fileList.find(item => item.uid === file.uid)
            obj.status = 'success' // 更改上传成功的状态
            obj.url = 'http://' + data.Location
          }
        })
      }
    },

    handleChange(file, fileList) {
      // 将视图的数据fileList 和 数据 this.fileList 进行同步
      // console.log(file)
      // console.log(fileList)
      // console.log(this.fileList)
      this.fileList = [...fileList]
    },
    beforeUpload(file) {
      // console.log(file)
      // 类型校验
      // 文件上传前的钩子,在这个函数中做文件校验, 对文件类型和文件大小做校验, 返回的是false禁止上传, true上传
      const listType = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!listType.includes(file.type)) {
        this.$message.error('请上传正确图片类型')
        return false
      }
      if (file.size / 1024 / 1024 > 0.5) {
        this.$message.error('请上传0.5m大小的图片')
        return false
      }
      return true
    }
  }
}
</script>

<style lang = 'scss' scoped>
  .disabled {
   ::v-deep {
     .el-upload--picture-card {
        display: none;

    }
   }
  }
</style>
